<template>
  <div>
    <Appheader :parentToChild="ymname" ref="loginStatus"></Appheader>
    <div class="tushuDetail" v-loading="loading">
      <div class="tushu_imgs">
        <div class="tushu_imgs_a">
          <div class="img_a">
            <img :src="info.photo" alt />
          </div>
          <!-- <div class="img_b flex">
            <img
              :src="itemimg"
              alt
              v-for="(itemimg,indeximg) in imgs"
              :key="indeximg"
              :class="imgs_choose==itemimg?'imgs_active':''"
              @mouseover="mouseOver(itemimg)"
            />
          </div>-->
        </div>
        <div class="tushu_imgs_b">
          <div class="left">
            <div class="tushuC_a">{{info.title}}</div>
            <div class="tushuC_c_a">
              <div
                class="tushuC_d"
              >配送方式：快递&nbsp;&nbsp;&nbsp;&nbsp;包邮&nbsp;&nbsp;&nbsp;&nbsp;48小时发货</div>
              <div class="addnum">
                购买数量：
                <el-input-number v-model="buynum" @change="handleChange" :min="1"></el-input-number>
              </div>
              <!-- <p style="margin-bottom:10px;">
                定&nbsp;&nbsp;&nbsp;&nbsp;价
                <span>{{info.dingjia}}元</span>
              </p> -->
              <p>
                <span>￥{{info.price}}</span>
                <!-- <a>元</a> -->
              </p>
            </div>
          </div>
          <div class="right">
            <div class="imgcode">
              <img src="../assets/Wx2.png" alt />
              <p>扫描下单更简单</p>
            </div>
            <div class="tushuC_f flex">
              <div class="buy1" @click="addcar()">加入购物车</div>
              <div class="buy2 flex" @click="gobuy()">
                <!-- <img src="../assets/car_white.png" alt /> -->
                立即购买
              </div>
            </div>
          </div>

          
          
        </div>
      </div>
      <div class="tushuD_detail">
        
        <div class="detail_b">
          <div class="detail_b_a">
            <p>图书详情</p>
            <!-- <div>产品参数：</div> -->
            <div class="b_a_classify" v-html="info.details"></div>
          </div>
          <div class="detail_b_b">
            <p>相关推荐</p>
            <ul>
              <li v-for="(list,index) in array" :key="index" @click="xkdetail(list.id)">
                <img :src="list.photo" alt />
                <div
                  class="hidden b_bottom_a"
                  style="width:204px;margin-top:13px;margin-bottom:9px;"
                >{{list.title}}</div>
                <!-- <div class="b_bottom_b flex">
                  <div>¥{{list.price}}元</div>
                  <div>定价{{list.dingjia}}元</div>
                </div> -->
                <div class="c_bottom_d flex" style="margin-top:9px;">
                  <!-- <el-rate v-model="list.star" disabled :colors="['#fc7023', '#fc7023', '#fc7023']" disabled-void-color="#999"></el-rate> -->
                  <div class="price">¥{{list.price}}元</div>
                  <div>{{list.buyNum}}人购买</div>
                </div>
                <div class="c_bottom_e">加入购物车</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "./header";
import Appfooter from "./footer";
import { ykGoodsinfo, booktuijian, addcar } from "../api/index";
export default {
  props: {},
  data() {
    return {
      ymname: "艺考图书",
      imgs: [], //详情图
      imgs_choose: "", //选中的详情图
      loading: true,
      info: [],
      array: [],
      buynum: 1
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.id = this.$route.params.id || sessionStorage.getItem("school_id");
    sessionStorage.setItem("school_id", this.id);
    this.post();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        id: this.id
      };
      ykGoodsinfo(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.info = res.data.ykGoods;
          }
        })
        .catch(e => {});
      booktuijian(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            for (let i = 0; i < res.data.ykGoodsList.length; i++) {
              res.data.ykGoodsList[i].star = res.data.ykGoodsList[i].star - 0;
            }
            this.array = res.data.ykGoodsList;
          }
        })
        .catch(e => {});
      this.loading = false;
    },
    mouseOver(item) {
      this.imgs_choose = item;
    },
    xkdetail(id) {
      this.id = id;
      sessionStorage.setItem("school_id", this.id);
      this.post();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    addcar() {
      if (localStorage.getItem("YKuserid")) {
        let msg = {
          userId: localStorage.getItem("YKuserid"),
          goodsId: this.id,
          booknum:this.buynum
        };
        addcar(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            if (res.data.code == 0) {
              this.info = res.data.ykGoods;
              this.$refs.loginStatus.userDetail();
            }
          })
          .catch(e => {});
      } else {
        this.$refs.loginStatus.login();
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        return;
      }
    },
    gobuy() {
      if (localStorage.getItem("YKuserid")) {
        this.$router.push({
          name: "querenBuy",
          params: {
            order: this.id,
            buynum:this.buynum
          }
        });
      } else {
        this.$refs.loginStatus.login();
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        return;
      }
    },
    //步进器
    handleChange(value) {
      this.buynum=value;
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
.tushuDetail {
  width: 1200px;
  margin: 0 auto;
  padding-top: 27px;
}
/* tushu_imgs */
.tushu_imgs {
  margin-left: 14px;
  display: flex;
  align-items: center;
}
.img_a {
  width: 338px;
  height: 218px;
  background: #e7e7e7;
  border-radius: 20px;
}
.img_a > img {
  width: 237px;
  height: 100%;
  margin: 0 auto;
  margin-top: 1px;
}
.img_b {
  margin-top: 18px;
  padding-left: 48px;
}
.img_b > img {
  width: 42px;
  height: 44px;
  margin-right: 15px;
}
.imgs_active {
  border: 1px solid #333333;
}
/* tushu_imgs_b */
.detail_b {
  display: flex;
}
.tushu_imgs_b {
  margin-left: 37px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tushuC_a {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-left: 8px;
  margin-bottom: 16px;
}
.tushuC_b {
  width: 671px;
  font-size: 20px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-left: 7px;
  margin-bottom: 13px;
}
.tushuC_c {
  width: 671px;
  height: 149px;
  /* background: url(../assets/tushubg.png) no-repeat; */
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  /* border: 1px dashed #666; */
}
.imgcode {
  width: 122px;
  margin:0 auto;
}
.imgcode > img {
  width: 113px;
  height: 113px;
  margin: 0 auto;
}
.imgcode > p{
  color: #aeb0bf;
  text-align: center;
  font-size: 12px;
  line-height: 30px;
}
.tushuC_c_a {
  margin-top: 14px;
  margin-left: 7px;
}
.tushuC_c_a > p {
  margin-top: 20px;
}
.tushuC_c_a > p > span {
  font-size: 32px;
  color: #c7aa4e;
  font-weight: bold;
}
.tushuC_c_a > p:first-child > span {
  text-decoration: line-through;
  margin-left: 20px;
}
.tushuC_c_a > p:nth-child(2) > span {
  font-size: 36px;
  color: #c7aa4e;
  margin-left: 25px;
}
.tushuC_c_a > p:nth-child(2) > a {
  color: #c7aa4e;
}
.tushuC_d {
  margin-top: 20px;
  margin-bottom: 21px;
  color: #acaebd;
}
.tushuC_f {
  margin-top: 23px;
  cursor: pointer;
  border:1px solid #c7aa4e;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  overflow: hidden;
}
.addnum{
  color: #acaebd;
}
.buy1 {
  flex:1;
  height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 50px;
  text-align: center;
}
.buy2 {
  flex:1;
  height: 50px;
  background: #c7aa4e;
  font-size: 16px;
  color: #242f2b;
  line-height: 50px;
  justify-content: center;
}
.buy2 > img {
  width: 16px;
  height: 15px;
  margin-right: 6px;
}
/* tushuD_detail */
.tushuD_detail {
  margin-top: 50px;
  margin-bottom: 58px;
  background: #363640;
}

.detail_a {
  font-size: 24px;
  color: #c7aa4e;
  padding:0 33px;
  padding-top: 30px;
}
.detail_a > .line {
  width: 4px;
  height: 23px;
  background: rgba(216, 20, 23, 1);
  margin-right: 6px;
}
.detail_b_a {
  width: 750px;
  border-bottom: 0;
}
.detail_b_a > div,
.detail_b_a > p {
  font-size: 16px;
  color: #333;
}
.detail_b_a > div:nth-child(1) {
  width: 692px;
  margin: 0 auto;
  margin-top: 26px;
  margin-bottom: 16px;
}
.b_a_classify {
  width: 692px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.b_a_classify > p {
  margin-right: 100px;
  margin-bottom: 16px;
}
.b_a_classify >>> img {
  width: 100%;
}
.imgs_detail_c {
  margin-top: 30px;
}
.imgs_detail_c > img {
  width: 100%;
  height: auto;
}
/* 推荐 */
.detail_b_b {
  width: 392px;
  border-bottom: 0;
  border-left: 0;
  border-left:1px solid #444750;
}
.detail_b_a > p {
  font-size: 22px;
  color: #c9a750;
  padding:0 33px;
  padding: 40px 0 30px 33px;
}
.detail_b_b > p {
  font-size: 18px;
  color: #c9a750;
  padding: 40px 0 30px 33px;
}
.detail_b_b > ul {
}
li {
  width: 100%;
  height: 382px;
  padding-top: 24px;
  margin-bottom: 28px;
  box-sizing: border-box;
  cursor: pointer;
}
li > img {
  width: 139px;
  /* height: 204px; */
  margin: 0 auto;
}
.c_bottom_d {
  justify-content: center;
  align-content: center;
}
.c_bottom_d >>> .el-rate__icon {
  margin-right: 0;
  font-size: 14px;
}
.c_bottom_d >>> .el-rate {
  height: 14px;
  line-height: 0px;
}
.c_bottom_d > div {
  color: #7f818d;
  font-size: 12px;
  margin-left: 4px;
}
.c_bottom_e{
  border:1px solid #40434c;
  line-height: 50px;
  border-radius: 50px;
  text-align: center;
  color: #797a8e;
  font-size: 18px;
  width: 80%;
  margin:10px auto;
}
.c_bottom_e:hover{
  background: #c4a54b;
  color: #fff;
  border:1px solid #c4a54b;
}
.b_bottom_a {
  width: 268px;
  margin: 0 auto;
  font-size: 16px;
  color: #babbbd;
  margin-top: 5px;
  margin-bottom: 4px;
  text-align: center;
}
.b_bottom_b {
  justify-content: center;
}
.b_bottom_b > div {
  font-size: 14px;
}
/* .b_bottom_b > div:first-child {
  color: #c7aa4e;
  margin-right: 5px;
  font-size: 18px;
} */
.c_bottom_d .price{
  color: #c7aa4e;
  margin-right: 5px;
  font-size: 18px;
}
.b_bottom_b > div:last-child {
  color: #999;
  text-decoration: line-through;
}
/* bujinqi */
.addnum >>> .el-input-number {
  margin-left: 46px;
  width: 105px;
  line-height: 27px;
}
.addnum >>> .el-input-number__decrease,
.addnum >>> .el-input-number__increase {
  width: 27px;
  height: 26px;
  background: #ececec;
  color: #333333;
}
.addnum >>> .el-input__inner {
  height: 28px;
  line-height: 27px;
}
.addnum >>> .el-input-number,
.addnum >>> .el-input__inner {
  padding-left: 0px;
  padding-right: 0px;
}
.addnum >>> .el-input {
  width: 105px;
}
.addnum>>> .el-input-number__decrease:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled),
  .addnum
  >>> .el-input-number__increase:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled) {
  border-color: none!important;
}
</style>
